<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="flex flex-center" @tap="showAgentChange()">
				<view class="flex-1 flex flex-column grid-gap-1">
					<text class="h9 font-weight-600"> {{ selected.agent_level }}{{ selected.name }}，欢迎回来 </text>
					<text class="h10 text-primary" v-if="selected.province_id">{{ selected.province }}
						{{ selected.city }} {{ selected.area }}</text>
					<text class="h10 text-grey" v-if="!selected.state">{{ selected.message }}</text>
					<text class="h10 text-primary" v-else-if="selected.expire_time">
						{{ selected.expire_time }}到期</text>
				</view>
				<uni-icons type="down" size="20" color="var(--xl-placeholder)"></uni-icons>
			</view>
			<view class="bg-white rounded-4 flex flex-column grid-gap-4 p-4">
				<view class="flex flex-center grid-gap-2">
					<text class="font-weight-600">数据概览</text>
					<view class="flex-1"></view>
					<text class="h10" v-for="item in dateArr" :key="item.value"
						:class="[search.date === item.value ? 'text-primary' : 'text-placeholder']"
						@tap="setSearch('date', item.value)">{{ item.title }}</text>
				</view>
				<view class="grid-columns-6 grid-gap-4">
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.order_num) }}</text>
						<view class="h9">订单量</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.order_price) }}</text>
						<view class="h9">订单额</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.duration) }}</text>
						<text class="h9">分钟</text>
						<view class="h9">服务时长</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ statistics.new_customers }}</text>
						<view class="h9">新客</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.commission) }}</text>
						<view class="h9">分佣</view>
					</view>
				</view>
			</view>
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">常用功能</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-2">
					<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
						v-for="(item, index) in menu" :key="index" @tap="$page.open(item.page, true)">
						<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
						<text class="h9 font-weight-500">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<x-picker v-if="agent.length > 0" v-model:show="agentShow" keyName="title" :columns="[agent]"
			confirmColor="var(--xl-primary)" @confirm="agentChange">
		</x-picker>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { $func, $api, $message, $page } from '@/utils';
import { useMap } from '@/utils/map'
import { onLoad } from '@dcloudio/uni-app';
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const agent = ref([]);
const loading = ref(true);
const agentShow = ref(false);
const selected = ref({
	id: '',
	name: '',
	agent_level: ''
});
const search = ref({
	date: 'day',
	agent_id: ''
});
const dateArr = ref([{
	title: '今日',
	value: 'day'
},
{
	title: '昨日',
	value: 'yesterday'
},
{
	title: '本周',
	value: 'week'
},
{
	title: '本月',
	value: 'month'
},
{
	title: '上月',
	value: 'last_month'
}
]);
const statistics = ref({
	order_num: '--',
	order_price: '--',
	duration: '--',
	new_customers: '--',
	commission: '--',
	browse_num: '--',
});
const menu = ref([
	{
		name: '财务明细',
		icon: '/static/icons/user/bill.png',
		page: '/agent/pages/user/wallet/log'
	},
	{
		name: '提现',
		icon: '/static/icons/user/withdrawal.png',
		page: '/agent/pages/user/wallet/withdrawal'
	},
]);
const getAgent = () => {
	$api.Agent.user().then((data) => {
		agent.value = data;
		if (agent.value.length > 0) {
			agentChange(data[0]);
		}
	}).catch((err) => {
	}).finally(() => {
		loading.value = false;
	})
}
const showAgentChange = () => {
	agentShow.value = true;
}
const agentChange = (data) => {
	selected.value = data;
	search.value.agent_id = selected.value.id;
	getStatistics();
}
const setSearch = (key, val) => {
	search.value[key] = val;
	getStatistics();
}
const getStatistics = () => {
	$api.Agent.statistics(search.value).then(data => {
		statistics.value = data;
	})
}
onLoad(() => {
	getAgent();
})
</script>
